<template>
  <div class="inspect-add" style="height: 100%">

    <div v-show="show == 2" style="height: 100%">
      <div class="areaSelect">
        <div @click="fenceSelect()">添加</div>
        <div style="margin-right: 10px">{{ $t("area.Layer") }}</div>
        <treeselect
          v-model="mapValue"
          :placeholder="$t('area.Layer')"
          :max-height="300"
          :options="mapList"
          @input="handleMapChange"
        />
        <!-- <el-button type="primary" style="position: absolute;right:0;top:8px;" icon="el-icon-circle-plus-outline" @click="show=1">{{$t('operating.add')}}</el-button> -->
      </div>
      <!--:style="{ height: mapHeight, width: mapWidth }" <el-button class="addAlarm" type="primary" disabled="true">添加告警设置</el-button>-->
      <div id="mapbox">
        <div id="map" />
        <div class="positiondiv"><span /></div>
        <div class="scalediv"><span /></div>
      </div>
    </div>

    <!--新增和编辑-->
    <div v-show="show == 1" style="height：100%;">
      <!-- <h3 class="inspect-title">
        {{ form.pollingName ? "编辑巡检" : "添加巡检" }}
      </h3> -->
      <el-form ref="form" label-width="100px">
        <!--围栏名称-->
        <el-row>
          <el-col :span="5">
            <el-form-item :label="$t('inspection.inspectionName')">
              <el-input ref="pollingNameForm" v-model="pollingNameForm" />
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <!--巡检时间-->
            <el-form-item :label="$t('inspection.inspectionTime')">
              <el-time-picker
                v-model="form.startTime"
                editable
                value-format="HH:mm"
                format="HH:mm"
                :placeholder="$t('operating.StartTime')"
                @change="startTimeForm"
              />
              <span>{{ $t("operating.line") }}</span>
              <el-time-picker
                v-model="form.endTime"
                editable
                width="120"
                value-format="HH:mm"
                format="HH:mm"
                :placeholder="$t('operating.EndTime')"
                @change="endTimeForm"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('inspection.inspectionResidenceTime')">
              <el-input-number
                v-model="residenceTime"
                :min="0"
                :step="5"
              /><span style="font-size: 16px"> s</span>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <!--巡检周期-->
            <el-form-item :label="$t('inspection.inspectionCircle')">
              <div class="check-inspect-row">
                <el-checkbox
                  v-model="checkAll"
                  style="margin-right: 15px"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >{{ $t("operating.checkAll") }}</el-checkbox>

                <el-checkbox-group
                  v-model="checkedWeeks"
                  @change="handleCheckedWeekChange"
                >
                  <el-checkbox
                    v-for="week in weeks"
                    :key="week"
                    :label="week"
                  >{{ week }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!--巡检人员-->
        <el-row>
          <el-col :span="22">
            <el-form-item :label="$t('inspection.peopleData')">
              <el-radio-group v-model="radioType">
                <el-radio :label="true">{{ $t("common.cstaff") }}</el-radio>
                <el-radio :label="false">{{ $t("common.cdept") }}</el-radio>
              </el-radio-group>
              <!-- 人员树 -->
              <tree-transfer
                v-show="radioType"
                filter
                open-all
                :filter-placeholder="$t('operating.pleaseWrite')"
                :title="$t('alarm.peopleTitle')"
                :from_data="peopleData"
                :to_data="toPeopleData"
                node-key="id"
                :default-checked-keys="defaultCheckedPeople"
                default-transfer
                :placeholder="$t('Notice.keywordFiltering')"
                :default-props="{ label: 'label' }"
                @addBtn="addPeople"
                @removeBtn="removePeople"
              />
              <!-- 部门树 -->
              <tree-transfer
                v-show="!radioType"
                :filter="true"
                open-all
                :filter-placeholder="$t('operating.pleaseWrite')"
                :title="$t('alarm.deptTitle')"
                :from_data="deptData"
                :to_data="toDeptData"
                node-key="id"
                :default-checked-keys="defaultCheckedDept"
                default-transfer
                :default-props="{ label: 'label' }"
                :placeholder="$t('Notice.keywordFiltering')"
                @addBtn="addDept"
                @removeBtn="removeDept"
              />
            </el-form-item>
          </el-col>
          <el-col :span="21">
            <!--是否启用该任务-->
            <el-form-item :label="$t('operating.isEnable')">
              <el-switch
                v-model="switchVal"
                inactive-value="0"
                active-value="1"
                active-color="#ffc000"
                inactive-color="#dcdfe6"
                @change="isSwitch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <!--添加巡检点按钮-->
            <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              class="changeBtn"
              size="mini"
              @click="addXun()"
            >{{ $t("operating.buttonXun") }}</el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <div v-show="show4">
              <el-table
                :data="fenceList"
                :header-cell-style="tableHeaderColor"
                style="width: 90%; margin: auto"
              >
                <!--多选框-->
                <!--<el-table-column prop="order" label="序号" width="50"></el-table-column>-->
                <el-table-column
                  prop="fenceName"
                  :label="$t('inspection.fenceName')"
                />
                <el-table-column
                  prop="kaishiTime"
                  :label="$t('inspection.beiginTime')"
                />
                <el-table-column
                  prop="jieshuTime"
                  :label="$t('inspection.endTime')"
                />
                <el-table-column
                  prop="lowPeople"
                  :label="$t('inspection.lowPeople')"
                />
                <!--操作-->
                <el-table-column
                  :label="$t('operating.operating')"
                  fixed="right"
                  width="350"
                >
                  <template slot-scope="scope">
                    <p
                      style="
                        display: inline-block;
                        color: #1f59ad;
                        margin-right: 10px;
                        cursor: pointer;
                      "
                      @click="upMove(scope.$index, scope.row)"
                    >
                      {{ $t("inspection.upMove") }}
                    </p>
                    <p
                      style="
                        display: inline-block;
                        color: #1f59ad;
                        margin-right: 10px;
                        cursor: pointer;
                      "
                      @click="downMove(scope.$index, scope.row)"
                    >
                      {{ $t("inspection.downMove") }}
                    </p>
                    <el-button
                      size="mini"
                      @click="handleOnecompile(scope.$index, scope.row)"
                    >{{ $t("operating.handle") }}</el-button>
                    <el-button
                      size="mini"
                      @click="handleOneEdit(scope.$index, scope.row)"
                    >{{ $t("inspection.addSee") }}</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleOneDelete(scope.$index, scope.row)"
                    >{{ $t("operating.delete") }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--新增监控区域-->
    <el-dialog
      width="30%"
      :title="$t('inspection.MonitoringAreaSettings')"
      :close-on-click-modal="false"
      :visible.sync="chosenCamera"
      append-to-body
    >
      <el-form ref="cameraForm" label-width="120px">
        <!--绑定摄像头-->
        <el-form-item :label="$t('inspection.BindingCamera')">
          <el-select
            v-model="cameraForm.cameraId"
            :multiple="true"
            filterable
            :placeholder="$t('Notice.bindingCamera')"
            style="max-width: 215px"
          >
            <el-option
              v-for="item in cameraList"
              :key="item.idx"
              :label="item.cameraName"
              :value="item.idx"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!--操作-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveCamera">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="closeDialog">{{ $t("operating.cancel") }}</el-button>
      </span>
    </el-dialog>
    <!--删除提示框-->
    <el-dialog
      :title="$t('operating.prompt')"
      :close-on-click-modal="false"
      :visible.sync="delVisible"
      width=""
    >
      <div class="del-dialog-cnt">{{ $t("operating.deletePrompt") }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteRow">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="delVisible = false">{{
          $t("operating.cancel")
        }}</el-button>
      </span>
    </el-dialog>

    <div style="text-align: right; padding: 10px 85px 0 0">
      <div style="display: inline-block">
        <el-button type="primary" @click="saveInspectionEdit">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="fanhuiInspectionEdit">{{
          $t("operating.cancel")
        }}</el-button>
      </div>
    </div>
    <!-- 选择巡检点弹框 -->
    <el-dialog
      :title="$t('operating.prompt')"
      :close-on-click-modal="false"
      :visible.sync="chioceVisible"
      width="500px"
    >
      <el-form ref="chioceForm" label-width="120px">
        <!--开始时间-->
        <el-form-item :label="$t('inspection.beiginTime')">
          <el-time-picker
            v-model="beiginTime"
            editable
            value-format="HH:mm"
            format="HH:mm"
            :placeholder="$t('operating.StartTime')"
            style="width: 300px"
          />
        </el-form-item>
        <!--结束时间-->
        <el-form-item :label="$t('inspection.endTime')">
          <el-time-picker
            v-model="endTime"
            editable
            value-format="HH:mm"
            format="HH:mm"
            :placeholder="$t('operating.EndTime')"
            style="width: 300px"
          />
        </el-form-item>
        <!-- 最低巡检人数 -->
        <el-form-item :label="$t('inspection.lowPeople')">
          <el-input-number
            v-model="zuidiPeople"
            :min="1"
            :max="toPeopleDataTwo.length"
            style="width: 300px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="coolChioce">{{
          $t("operating.determine")
        }}</el-button>
        <el-button size="mini" @click="chioceVisible = false">{{
          $t("operating.cancel")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import ol from 'openlayers'
import {
  Load_Map,
  Load_Fence,
  _TransPixel,
  TagStyle,
  _dPR,
  _iMap,
  t,
  FenceLayer,
  FenceSource,
  releaseFence,
  LoadTypeData,
  sendThis
} from '@/utils/iMap.js'
// import {
//   Load_Map,
//   Load_Fence,
//   _TransPixel,
//   TagStyle,
//   _dPR,
//   _iMap,
//   t,
//   FenceLayer,
//   FenceSource,
//   releaseFence,
//   LoadTypeData,
//   sendThis
// } from '@/utils/historyMap.js'

import {
  CameraList,
  getMapTree,
  inspectionList,
  staffTrees,
  getDeptTree,
  staffTree,
  getMap,
  deletePolling,
  addPolling,
  findOnePolling
} from '@/api/cy.js'
import { Select } from 'ol/interaction.js'
import treeTransfer from '@/components/TransferExtend'
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { baseUrl } from '@/utils/global.js'
// import bus from "../common/bus";

export default {
  components: { treeTransfer, Treeselect },
  data() {
    return {
      pollingNameForm: '',
      chioceVisible: false,
      zuidiPeople: '1',
      lowPeople: '',
      weekDays: this.$t('alarm.cycle'),
      switchVal: '1', // 是否启用
      tableDataUrl: '',
      deptValue: '',
      color2: null, // ColorPicker 颜色选择器,无默认值；
      oldMapId: '',
      tableData: [],
      mapList: [],
      checkDataList: [], // 获取围栏考勤信息数据
      fenceList: [],
      mapValue: null, // 选择的地图
      text: this.$t('operating.tabularMode'),
      cameraForm: { cameraId: [] },
      typeCaozuo: 'add', // 操作按钮判断
      // 模糊查询内容
      searchContent: '',
      show: '1', // 切换显示的页面
      show3: false,
      show4: false,
      mapHeight: window.innerHeight - 115 + 'px', // 地图区域高度
      mapWidth: window.innerWidth + 'px',
      alarmType: '',
      currentPage: 1, // 当前所在页
      total: 0, // 总页数
      pageSize: '10', //
      pollingId: '', // 告警Id
      rules: {},

      /** *******************表格相关*********************/

      editTableVisible: false,
      editVisible: false, // 编辑框是否可见
      delVisible: false, // 删除框是否可见
      chosenCamera: false,
      _select: null,
      editEnable: true, // 点击的编辑or添加
      // 用户表单提交
      form: { dept: '', order: '', people: 1 },
      // form: {
      //   pollingName: ''
      // },

      //  **************告警周期相关参数**************  //
      checkAll: false,
      weeks: this.$t('alarm.cycle'),
      checkedWeeks: this.$t('alarm.defaultChecked'),
      isIndeterminate: true,

      residenceTime: 30, // 巡检点停留时间

      //  **************树形穿梭框相关参数**************  //
      title: ['人员列表', '已选择人员'],
      peopleData: [], // 人员列表
      toPeopleData: [], // 已选人员
      toPeopleDataTwo: [],
      defaultCheckedPeople: [],

      // 部门
      deptData: [], // 部门列表
      toDeptData: [], // 已选部门
      toDeptDataTwo: [],
      defaultCheckedDept: [], // 默认选择部门

      radioType: true,
      fenceId: 0, // 选中的围栏id
      selectFeature: '', // 选中围栏
      cameraList: [],
      selectPointerMove: null,
      pointCan: '', // 巡检点参数
      beiginTime: '',
      endTime: '',
      row: '',
      typePoint: '', // 巡检点添加编辑分类
      pointId: ''
    }
  },
  mounted() {
    // 动态设置map的高度
    // 首先在DOM渲染数据时，设置map的高度
    this.windowRefresh()
    // 然后监听window的resize事件，在浏览器窗口变化时再设置下map的高度
    // console.log("onresize:");
    const self = this
    window.onresize = function temp() {
      self.windowRefresh()
    }
    this.staffTree() // 获取人员树
    this.init()
  },
  methods: {
    // 返回上一级
    fanhuiInspectionEdit() {
      if (this.show === 2) {
        this.show = 1
        this.mapValue = ''
      } else {
        this.$emit('changeShow', true)
        this.nullForm()
      }
    },

    // 确定添加巡检信息
    saveInspectionEdit() {
      const cycle = []
      for (let i = 0; i < this.weekDays.length; i++) {
        if (this.checkedWeeks.indexOf(this.weekDays[i]) > -1) {
          cycle.push(1)
        } else {
          cycle.push(0)
        }
      }
      let enable = ''
      if (this.switchVal == true) {
        enable = 1
      } else {
        enable = 0
      }
      let datas = []
      for (let i = 0; i < this.fenceList.length; i++) {
        datas.push({
          bandCameraList: this.fenceList[i].bandCameraList, // 监控摄像头
          fenceId: this.fenceList[i].fenceId,
          timeStart: this.fenceList[i].kaishiTime,
          timeEnd: this.fenceList[i].jieshuTime,
          leastPersonNum: this.fenceList[i].lowPeople,
          curIndex: i
        })
      }
      const param = {
        // pollingName: this.form.pollingName,
        pollingName: this.pollingNameForm,
        timeStart: this.form.startTime,
        timeEnd: this.form.endTime,
        cycle: cycle.join(','),
        enable: enable,
        pollingFences: datas,
        pollingDuration: this.residenceTime
      }
      if (this.radioType) {
        param['personnelList'] = this.toPeopleDataTwo.join(',')
      } else {
        param['departmentList'] = this.toDeptDataTwo.join(',')
      }

      if (
        this.pollingIdx != null ||
        this.pollingIdx != '' ||
        this.pollingIdx != undefined
      ) {
        param['idx'] = this.pollingIdx
      }

      addPolling(param).then((res) => {
        const RES = this.responseUse(res, true)
        if (RES) {
          // this.getData()
          this.editVisible = false
          this.show3 = false
          this.show4 = false
          this.fenceList = []
          this.pollingIdx = ''
          this.staffTree()
          datas = []
          this.toPeopleDataTwo = []
          this.toDeptDataTwo = []
          this.nullForm()

          this.$emit('changeShow', true)
        }
      })
    },

    // 切换图层
    handleMapChange() {
      this.selectPointerMove = null
      // _iMap.removeInteraction(this.selectPointerMove)
      // this.v_MyMessage("选择的树分支ID：" + this.mapValue, "success");
      if (this.mapValue === '' || this.mapValue === undefined) {
        this.v_MyMessage(this.$t('Notice.mapIDIsEmpty'), 'error')
        return false
      } else {
        if (this.oldMapId != this.mapValue) {
          getMap(this.mapValue).then((res) => {
            const RES = this.responseUse(res)
            this.mapName = RES.mapName
            Load_Map(
              baseUrl + '/file' + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            )
            // Load_Map(baseUrl + '/file' + RES.mapPath, RES.mapActualX,
            //   RES.mapActualY,
            //   RES.mapPixelX,
            //   RES.mapPixelY,
            //   RES.mapPixelX / RES.mapActualX, [RES.mapOriginX, RES.mapOriginY], false)
            this.Geo =
              '/system/fenceInfo/findListByFenceTypeGeoJson?fenceType=polling&layerId=' +
              this.mapValue
            releaseFence()
            Load_Fence(this.Geo)
            this.fenceSelect()
          })
        }
      }
    },
    staffTree(data) {
      staffTree(this.mapValue).then((res) => {
        const RES = this.responseUse(res)
        this.peopleData = RES
        this.defaultCheckedPeople = data
      })
    },

    deptTree(data) {
      getDeptTree().then((res) => {
        const RES = this.responseUse(res)

        this.deptData = RES
        this.defaultCheckedDept = data
      })
    },

    // 巡检点上移下移
    upMove(index, row) {
      if (index == 0) {
      } else {
        // 与上一条数据交换位置
        const item = this.fenceList[index - 1]
        this.fenceList[index - 1] = this.fenceList[index]
        this.fenceList[index] = item
        // 操作数组,便于刷新表格
        this.fenceList.push(row)
        this.fenceList.pop()
        // console.log( this.fenceList)
      }
    },
    downMove(index, row) {
      if (index == this.fenceList.length - 1) {
      } else {
        const item = this.fenceList[index]
        this.fenceList[index] = this.fenceList[index + 1]
        this.fenceList[index + 1] = item
        this.fenceList.push(row)
        this.fenceList.pop()
        // console.log( this.fenceList)
      }
    },
    // 巡检点编辑
    handleOnecompile(index, row) {
      this.typePoint = 'edit'
      this.pointId = row.fenceId
      this.beiginTime = row.kaishiTime
      this.endTime = row.jieshuTime
      this.zuidiPeople = row.lowPeople
      this.chioceVisible = true
    },
    // 表单巡检时间开始时间
    startTimeForm(val) {
      this.beiginTime = val
    },
    // 表单巡检时间结束时间
    endTimeForm(val) {
      this.endTime = val
    },
    // 巡检点设置弹框确认
    coolChioce() {
      if (this.typePoint == 'add') {
        this.fenceList.push({
          fenceId: this.pointCan.get('id'),
          fenceName: this.pointCan.get('name'),
          kaishiTime: this.beiginTime,
          jieshuTime: this.endTime,
          lowPeople: this.zuidiPeople
        })
      } else {
        for (let i = 0; i < this.fenceList.length; i++) {
          if (this.pointId == this.fenceList[i].fenceId) {
            this.fenceList[i].kaishiTime = this.beiginTime
            this.fenceList[i].jieshuTime = this.endTime
            this.fenceList[i].lowPeople = this.zuidiPeople
          }
        }
      }

      if (this.fenceList.length > 0) {
        this.show3 = true
        this.show4 = true
      } else {
        this.show3 = false
        this.show4 = false
      }
      this.chioceVisible = false
      this.zuidiPeople = '1'
      this.beiginTime = ''
      this.endTime = ''
      this.show = 1
    },
    // 添加巡检点按钮
    addXun() {
      if (this.toPeopleDataTwo.length == 0 && this.toDeptDataTwo.length == 0) {
        this.v_MyMessage(this.$t('Notice.chiocePeople'), 'warning')
      } else {
        this.show = 2
      }
    },
    // // 添加巡检点方法
    // addData() {
    //   this.show = 1
    // },
    // 刷新窗口
    windowRefresh: function() {
      this.mapHeight = window.innerHeight - 115 + 'px'
      this.mapWidth = window.innerWidth + 'px'
      // this.mapWidth = window.innerWidth + "px";
    },
    processDate() {
      // 提出结束时间必须大于提出开始时间
      const self = this
      if (self.form.attendanceTime[1]) {
        console.log(self.form.attendanceTime[0], self.form.attendanceTime[1])
        if (self.form.attendanceTime[0] >= self.form.attendanceTime[1]) {
          this.myMessage(this.$t('Notice.timeFormatError'), 'warning')
        }
      }
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-image:linear-gradient(to bottom, #1890ff, #3488de);color:#fff;border-radius:3px;'
      }
    },
    // 重置表格显示格式
    // 巡检周期格式
    pollingCycle(row, column) {
      const stringWeek = []
      if (row.cycle) {
        const cycleArr = row.cycle.split(',')
        for (let j = 0; j < cycleArr.length; j++) {
          if (cycleArr[j] == 1) {
            stringWeek.push(this.weeks[j])
          }
        }
        return stringWeek.join('，')
      }
    },
    // 巡检时间格式
    rePollingTime(row, column) {
      return row.timeStart + '-' + row.timeEnd
    },

    // 获取部门列表数据
    getDeptTree() {
      getDeptTree().then((res) => {
        const RES = this.responseUse(res)
        this.deptData = RES
      })
    },

    // // 页面显示模式
    // isShowStyle() {
    //   if (this.show == 1) {
    //     // console.log(this.text);
    //     this.text = this.$t('operating.mapMode')
    //     this.show = 2
    //   } else if (this.show == 2) {
    //     this.text = this.$t('operating.tabularMode')
    //     this.show = 1
    //   }
    // },
    // 重置表格显示格式
    // 所有围栏列表
    fenceListSave(row, column) {
      const fenceArr = []
      if (row.fenceList) {
        for (let j = 0; j < row.fenceList.length; j++) {
          fenceArr.push(row.fenceList[j].fenceName)
        }
        return fenceArr.join('，')
      }
    },
    // 初始化默认地图
    initMap() {
      Load_Map(
        this.$store.state.initPicPath,
        67.65,
        54.16,
        1600,
        1280,
        1600 / 67.65,
        [-60, -30]
      )
      sendThis(this)
      LoadTypeData()
    },
    // 初始化函数
    init: function() {
      // 加载地图树
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        this.mapList = RES
      })
      // 初始化地图
      this.initMap()

      this.getCameraList()
      this.getDeptTree()
    },

    closeDialog() {
      // _iMap.removeInteraction(this.selectPointerMove)
      this.chosenCamera = false
      this.fenceSelect()
      this.staffTree()
      this.deptTree()
    },
    getCameraList() {
      CameraList().then((res) => {
        const RES = this.responseUse(res)
        this.cameraList = RES
      })
    },
    //  选择围栏
    fenceSelect() {
      const self = this
      self.selectPointerMove = new Select()
      _iMap.addInteraction(self.selectPointerMove)
      self.selectPointerMove.on('select', function(e) {
        if (e.selected.length > 0) {
          // 鼠标移入，选择了一个，大概是mouseover事件
          // self.staffTree();
          e.selected.forEach((f) => {
            let result = true
            self.fenceList.forEach((item) => {
              if (item.fenceId == f.get('id')) {
                result = false
              }
            })
            if (result) {
              // self.fenceList.push({ fenceId: f.get('id'), fenceName: f.get('name'),beiginTime: self.form.startTime,endTime:self.form.endTime})
              self.pointCan = f
              self.chioceVisible = true // 点击巡检点出现弹框
              self.typePoint = 'add'
            } else {
              self.v_MyMessage(self.$t('Notice.fenceAlreadyExists'), 'warning')
              self.show = 1
            }
          })
        }
      })
    },
    handleOneEdit(index, row) {
      this.chosenCamera = true
      this.selectIndex = index
      if (
        row.bandCameraList != '' &&
        row.bandCameraList != undefined &&
        row.bandCameraList != null
      ) {
        this.cameraForm = {
          cameraId: row.bandCameraList.split(',').map(Number)
        }
      } else {
        this.cameraForm = { cameraId: [] }
      }
    },
    saveCamera() {
      this.fenceList[this.selectIndex]['bandCameraList'] =
        this.cameraForm.cameraId + ''
      this.v_MyMessage(this.$t('Notice.fenceBindingSucceeded'), 'success')
      this.chosenCamera = false
      this.cameraForm = { cameraId: [] }
      this.show = 2
    },
    // 添加巡检信息
    addInspection() {
      if (this.fenceList.length > 0) {
        this.editVisible = true
        this.editEnable = true
      } else {
        this.v_MyMessage(this.$t('Notice.fenceAreaNotSelected'), 'success')
      }
      if (
        this.pollingIdx == null ||
        this.pollingIdx == '' ||
        this.pollingIdx == undefined
      ) {
        this.isIndeterminate = true
        this.form = { startTime: '', endTime: '' }
        this.checkedWeeks = ['周一', '周二', '周三', '周四', '周五']
        this.toPeopleData = []
        this.toPeopleDataTwo = []
        this.form.order = ''
        this.toDeptData = []
        this.toDeptDataTwo = []
      }
    },
    // 添加置空
    nullForm() {
      this.isIndeterminate = true
      this.form = { startTime: '', endTime: '', pollingName: '' }
      this.checkedWeeks = ['周一', '周二', '周三', '周四', '周五']
      this.toPeopleData = []
      this.toPeopleDataTwo = []
      this.form.order = ''
      this.toDeptData = []
      this.toDeptDataTwo = []
      this.fenceList = []
      this.residenceTime = 30
      this.show4 = false
    },
    // 修改巡检信息
    handleEdit(index, row) {
      const self = this
      // this.text = this.$t('operating.tabularMode');
      this.fenceList = []
      this.form = { startTime: '', endTime: '' }
      this.checkedWeeks = []
      this.editEnable = false
      this.isIndeterminate = true
      this.pollingIdx = row.idx
      this.form.order = row.idx
      this.toPeopleDataTwo = []
      this.toPeopleData = []
      this.toDeptData = []
      this.toDeptDataTwo = []
      findOnePolling(row.idx).then((res) => {
        const RES = this.responseUse(res)
        // this.editVisible = true;
        // this.form.pollingName = RES.pollingName

        this.pollingNameForm = RES.pollingName
        this.residenceTime = RES.pollingDuration // 巡检点停留时间
        if (RES.personnelList) {
          this.staffTree(RES.personnelList.split(','))
          this.radioType = true
        } else {
          this.deptTree(RES.departmentList.split(','))
          this.radioType = false
        }
        for (let i = 0; i < RES.pollingFences.length; i++) {
          self.fenceList.push({
            fenceId: RES.pollingFences[i].fenceId,
            fenceName: RES.pollingFences[i].fenceName,
            bandCameraList: RES.pollingFences[i].bandCameraList,
            lowPeople: RES.pollingFences[i].leastPersonNum, // 最低巡检人数
            kaishiTime: RES.pollingFences[i].timeStart, // 开始时间
            jieshuTime: RES.pollingFences[i].timeEnd // 结束时间
          })
        }
        self.form.startTime = RES.timeStart
        self.form.endTime = RES.timeEnd
        this.checkedWeeks = []
        if (RES.cycle) {
          const cycleArr = RES.cycle.split(',')
          for (let j = 0; j < cycleArr.length; j++) {
            if (cycleArr[j] == 1) {
              this.checkedWeeks.push(this.weeks[j])
            }
          }
        }
        if (this.checkedWeeks.length == this.weekDays.length) {
          this.isIndeterminate = false
        }
        if (RES.enable) {
          if (RES.enable == 1) {
            this.switchVal = '1'
          } else if (RES.enable == 0) {
            this.switchVal = '0'
          }
        }
        if (self.fenceList.length > 0) {
          self.show3 = true
          self.show4 = true
        } else {
          self.show3 = false
          self.show4 = false
        }
      })
    },
    handleData(obj) {
      for (let i = 0; i < obj.length; i++) {
        if (obj[i].children) {
          this.handleData(obj[i].children)
        } else {
          this.toPeopleDataTwo.push(obj[i].id)
        }
      }
    },

    // 删除考勤任务
    handleDelete(index, row) {
      this.selectIndex = index
      // 设置删除提示框为可见状态
      this.delVisible = true
      this.pollingId = row.idx
    },
    //  确定删除
    deleteRow() {
      // 隐藏删除提示框
      const param = [
        {
          idx: this.pollingId
        }
      ]
      this.delVisible = false
      this.editTableVisible = false
      deletePolling(param).then((res) => {
        const RES = this.responseUse(res, true)
        // if (RES) {
        //   this.getData()
        // }
      })
    },

    // 是否全选
    handleCheckAllChange(val) {
      this.checkedWeeks = val ? this.weekDays : []
      this.isIndeterminate = false
    },
    handleCheckedWeekChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.weeks.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.weeks.length
    },
    // 监听穿梭框组件添加
    addPeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          this.toPeopleDataTwo.push(objPeople[i].id)
        }
      }
    },
    // 监听穿梭框组件移除
    removePeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          for (let k = 0; k < this.toPeopleDataTwo.length; k++) {
            if (objPeople[i].id == this.toPeopleDataTwo[k]) {
              this.toPeopleDataTwo.splice(k, 1)
            }
          }
        }
      }
    },

    addDept(from, to, obj) {
      const deptObj = obj.nodes
      for (let i = 0; i < deptObj.length; i++) {
        if (deptObj[i].children == undefined) {
          this.toDeptDataTwo.push(deptObj[i].id)
        }
      }
    },

    removeDept(from, to, obj) {
      const deptObj = obj.nodes
      for (let i = 0; i < deptObj.length; i++) {
        if (deptObj[i].children == undefined) {
          for (let k = 0; k < this.toDeptDataTwo.length; k++) {
            if (deptObj[i].id == this.toDeptDataTwo[k]) {
              this.toDeptDataTwo.splice(k, 1)
            }
          }
        }
      }
    },
    // 是否启用
    isSwitch(val) {
      console.log(val)
    },
    handleOneDelete(index, row) {
      this.fenceList.splice(index, 1)
    }
  }
}
</script>
<style scoped>
#body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.handle-box {
  background-color: #939e89;
  padding: 10px;
  margin-bottom: 10px;
  min-width: 950px;
}
.buttonRt {
  float: right;
}
.clear {
  clear: both;
}
.areaSelect {
  align-items: baseline;
  position: absolute;
  right: 17px;
  width: 300px;
  margin-top: 0;
  z-index: 2000;
  display: flex;
  height: 45px;
}
.crumbs {
  margin: 25px 0;
}
span {
  margin-left: 0px;
  font-size: 13px;
}
.datalist {
  width: 100%;
  min-width: 1150px;
}

.fenceTable {
  width: 300px;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  top: 175px;
  right: 17px;
}
.changeBtn {
  width: 120px;
  margin-top: 5px;
  margin-right: 17px;
  margin-bottom: 10px;
  margin-left: 10px;
  z-index: 9999;
  /* float: right; */
}
.changeBtn >>> i {
  font-size: 16px;
}
.vue-treeselect {
  width: 190px;
  display: inline-block;
  top: 8px;
}

#mapbox {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
/* #mapbox >>> .ol-unselectable {
  bottom: 30px !important;
} */
.inspect-add {
  height: 100%;
}
.inspect-title {
  color: rgb(61, 59, 59);
  margin-left: 30px;
}
.check-inspect-row {
  display: flex;
}
</style>

